<!DOCTYPE html>
<html>
<head>
    <title>H5首页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .user-card { display: flex; align-items: center; margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 8px; }
        .avatar { width: 60px; height: 60px; border-radius: 50%; margin-right: 15px; }
        .login-btn { padding: 10px 20px; background: #07C160; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
<div id="app">
    <h1>微信登录演示</h1>

    <div v-if="user" class="user-card">
        <img :src="user.avatar" class="avatar">
        <div>
            <h3>{{ user.nickname }}</h3>
            <p>OpenID: {{ user.openid }}</p>
            <button @click="logout" class="login-btn">退出登录</button>
        </div>
    </div>

    <div v-else>
        <p>您尚未登录</p>
        <button @click="wechatLogin" class="login-btn">模拟微信登录</button>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            user: null
        },
        created() {
            this.checkLogin();
        },
        methods: {
            checkLogin() {
                axios.get('/api/user-info')
                    .then(res => {
                        this.user = res.data;
                    })
                    .catch(() => {
                        this.user = null;
                    });
            },
            wechatLogin() {
                axios.get('/api/auth-url')
                    .then(res => {
                        window.location.rep = res.data.authUrl;
                    })
                    .catch(err => {
                        console.error('获取授权URL失败:', err);
                        alert('登录失败，请查看控制台');
                    });
            },
            logout() {
                axios.get('/api/logout')
                    .then(() => {
                        this.user = null;
                    })
                    .catch(err => {
                        console.error('退出失败:', err);
                    });
            }
        }
    });
</script>
</body>
</html>